<template>
    <div class="programModify">
        
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm"
            :rules="rules">


            <el-form-item label="小程序名称" prop="appid">
                <el-select v-model="ruleForm.appid" placeholder="请选择小程序名称"  @change="handleChange">
                    <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="分类名称" prop="name">
                <el-select v-model="ruleForm.name" placeholder="请选择分类名称"  @change="handleChange1">
                    <el-option :label=item.name :value=item.id v-for="(item,index) in option" :key="index">{{item.name}}</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="点赞数" prop="jiaThumbsUp">
                <el-input v-model="ruleForm.jiaThumbsUp" placeholder="请输入点赞数"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="ruleForm.author" placeholder="请输入作者"></el-input>
            </el-form-item>


            <el-form-item label="是否推荐">
                <el-radio v-model="radio" label="1" border>推荐</el-radio>
                <el-radio v-model="radio" label="0" border>不推荐</el-radio>
            </el-form-item>
            

           


            <el-form-item label="图片模式">
                <el-radio-group v-model="radioImg" @change="changeHandler">
                    <el-radio label="1" border >单图</el-radio>
                    <el-radio label="2" border>多图</el-radio>
                    <el-radio label="3" border>跳转小程序</el-radio>
                    <el-radio label="4" border>图集</el-radio>
                </el-radio-group>
            </el-form-item>


           
            <el-form-item label="APPID" prop="appid" v-if="!WeChat">
                <el-input v-model="spappid" placeholder="APPID(跳转小程序必须选择一张列表主图)"></el-input>
            </el-form-item>
            <el-form-item label="参数" v-if="!WeChat">
                <el-input v-model="path" placeholder="参数(跳转小程序必须选择一张列表主图)"></el-input>
            </el-form-item>

            <el-upload
                class="upload-demo"
                action="https://www.yyjpai.com/index/operate/uploadsImg"
                :on-success=handleAvatarSuccess1
                :on-exceed="handleExceed1"
                name="file"
                :limit="1"
                list-type="picture"
                v-if="WeChat">
                <el-button size="small" type="primary">上传头像</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过50kb</div>
            </el-upload>

            <el-upload
                class="upload-demo"
                action="https://www.yyjpai.com/index/operate/uploadsImg"
                :on-success=handleAvatarSuccess
                :on-exceed="handleExceed"
                name="file"
                :limit=limit
                :file-list="fileList"
                list-type="picture">
                <el-button size="small" type="primary">上传图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            radioImg:'1',
            radio:"1",
            options:[],//选择小程序
            limit:1,//上传文件个数
            fileList:[],
            option:[],//选择分类
            imgUrl:'',
            spappid:'',//小程序APPID
            path:'',//小程序路径
            WeChat:true,
            ruleForm:{//下拉选中
                id:'',
                title:"",
                name:'',
                appid:'',
                author:"",
                jiaThumbsUp:''
            },
            rules:{//验证
                name:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                title:[
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                jiaThumbsUp:[
                    { required: true, message: '请输入点赞数', trigger: 'blur' }
                ]
            }
        }
    },
    mounted:function(){
        getChannel(this)
        
    },
    methods:{
        changeHandler(value){//改变单选状态
            //如果先上传图片再点击改变单选则清空图片数组
            if(this.imgUrl.indexOf(',')>1){
                this.$notify.error({
                    title: '错误',
                    message: '请先选择图片模式再上传图片~'
                });
                this.fileList = [];
                this.imgUrl = ''
                return false;
            }else{

                if(value==1 || value == 4){this.limit = 1;this.WeChat = true}//单图或者图集，模块
                else if (value==2){this.limit = 3;this.WeChat = true}//多图
                else{ this.WeChat = false;this.fileList = [];this.imgUrl = '';this.limit = 1 }//跳转小程序

            }
            this.radioImg = value;
        },
        handleExceed1(files, fileList){
            this.$notify.error({
                title: '错误',
                message: '最多只能上传1张头像哦~'
            });
        },
        handleAvatarSuccess1(res, file) {//上传成功之后
            this.ruleForm.avatar = file.response.data.logo
        },
        handleExceed(files, fileList){
            this.$notify.error({
                title: '错误',
                message: '最多只能上传'+this.limit+'张图哦~'
            });
        },
        handleAvatarSuccess(res, file) {//上传成功之后
            this.imgUrl==''?this.imgUrl=file.response.data.logo: this.imgUrl =  this.imgUrl+','+file.response.data.logo
           
           
            // console.log(this.imgUrl)
        },
        handleChange1(e){ 
            this.ruleForm.id = e;
        },//选择分类
        handleChange(e){//选择小程序
            this.$axios.getAddressJson('/information/getType',{appid:e})
            .then((res)=>{
                this.option = res.data.data;
                this.ruleForm.name = this.option[0].name;
                this.ruleForm.id = this.option[0].id;
            })
        },
        submitForm:function(e){//点击提交
            var data = {
                appid:this.ruleForm.appid,
                spappid:this.spappid,
                path:this.path,
                tpid:this.ruleForm.id,
                title:this.ruleForm.title,
                author:this.ruleForm.author,
                avatar:this.ruleForm.avatar,
                imgtype:this.radioImg,
                imgurl:this.imgUrl,
                jiaThumbsUp:this.ruleForm.jiaThumbsUp,
                isRecommend:this.radio
            }
            console.log(data)
            AddData(this,e,data,'information/addInformation')
            
        }
    }
}
</script>